<template>
    <div class="xzcs-pc-new-index3">
        <div class="top-banner">
            <div class="banner-box">
                <div v-for="(item, index) in bannerLiset" :key="index" class="banner-img"
                    :style="{ opacity: index == bannerIndex ? 1 : 0 }" @click="bannerClick">
                    <img :src="item.image" :alt="item.title" />
                </div>
                <i class="el-icon-arrow-left arrow-left banner-img-arrow" @click.stop="timeCheckbanner('previous')"></i>
                <i class="el-icon-arrow-right arrow-right banner-img-arrow" @click.stop="timeCheckbanner('next')"></i>
            </div>
        </div>

        <div class="box-i2">
            <div class="box-i2-list media-width">
                <nuxt-link to="/cswd" class="box-i2-item">
                    <img src="~/assets/images/index/box-i2_1.png" alt="" />
                    行业最新政策解读及精准推送
                </nuxt-link>
                <nuxt-link to="/school/vipzjkc" class="box-i2-item">
                    <img src="~/assets/images/index/box-i2_2.png" alt="" />
                    被财税人忽略的职场课
                </nuxt-link>
                <nuxt-link to="/ssfgk/index/0/1" class="box-i2-item">
                    <img src="~/assets/images/index/box-i2_3.png" alt="" />
                    税收法规及模板库案例
                </nuxt-link>
                <nuxt-link to="/service" class="box-i2-item">
                    <img src="~/assets/images/index/box-i2_4.png" alt="" />
                    全国工商企服服务商
                </nuxt-link>
                <nuxt-link to="/riskdetection" class="box-i2-item">
                    <img src="~/assets/images/index/box-i2_5.png" alt="" />
                    税务风险检测
                </nuxt-link>
                <nuxt-link to="/chatgpt/xzcsgpt" class="box-i2-item">
                    <img src="~/assets/images/index/box-i2_6.png" alt="" />
                    超级算法模型，财税人专属AI
                </nuxt-link>
            </div>
        </div>

        <div class="media-width box-title">
            <!-- <div class="box-title-t1">政策法规</div> -->
            <img src="~/assets/images/index/index_box_title_1.png" class="box-title-img" alt="政策法规" />
            <div class="box-title-text">
                小竹财税汇集税收/会计法规、热点问题第一时间实时更新。
            </div>
        </div>

        <div class="box-i3 media-width">
            <div class="box-i3-item" :class="{ large: boxI3Index == 1 }" @mouseenter="handleMouseEnter(1)"
                @mouseleave="handleMouseLeave(1)">
                <img src="~/assets/images/index/box-i3-bj1-m.png" class="bjm" alt="" />
                <img src="~/assets/images/index/box-i3-bj1-l.png" class="bjl" alt="" />
                <div class="title">税收法规库</div>
                <div class="text1">汇集了各类税收法规 政策;</div>
                <div class="text2">
                    在收录时会确保政策原文准确无误，并结合专家解读明确政策要点和适用场景。
                </div>

                <div class="l-title">税收法规库</div>
                <div class="link-list">
                    <nuxt-link v-for="(item, index) in policylist" :key="index" :to="`/ssfgk/${item.id}.html`"
                        target="_blank" class="link-item">
                        {{ item.title ? item.title : item.name }}
                    </nuxt-link>
                </div>
                <div class="l-title2">内容来源：</div>
                <div class="logo-list">
                    <img src="~/assets/images/index/box-i3-logolist5.png" alt="" />
                    <img src="~/assets/images/index/box-i3-logolist3.png" alt="" />
                </div>
                <nuxt-link to="/ssfgk/index/0/1" target="_blank" class="i3-more">查看更多</nuxt-link>
            </div>
            <div class="box-i3-item" :class="{ large: boxI3Index == 2 }" @mouseenter="handleMouseEnter(2)"
                @mouseleave="handleMouseLeave(2)">
                <img src="~/assets/images/index/box-i3-bj2-m.png" class="bjm" alt="" />
                <img src="~/assets/images/index/box-i3-bj2-l.png" class="bjl" alt="" />

                <div class="title">会计法规库</div>
                <div class="text1">包络了各行业会计相关政策法规</div>
                <div class="text2">
                    在云端的加持下，不断补充扩增最新最全的会计政策。
                </div>

                <div class="l-title">会计法规库</div>
                <div class="link-list">
                    <nuxt-link v-for="(item, index) in normlist" :key="index" :to="`/kjfgk/${item.id}.html`"
                        target="_blank" class="link-item">
                        {{ item.title ? item.title : item.name }}
                    </nuxt-link>
                </div>
                <div class="l-title2">内容来源：</div>
                <div class="logo-list">
                    <img src="~/assets/images/index/box-i3-logolist1.png" alt="" />
                    <img src="~/assets/images/index/box-i3-logolist2.png" alt="" />
                </div>
                <nuxt-link to="/kjfgk/index/0/1" target="_blank" class="i3-more">查看更多</nuxt-link>
            </div>
            <div class="box-i3-item" :class="{ large: boxI3Index == 3 }" @mouseenter="handleMouseEnter(3)"
                @mouseleave="handleMouseLeave(3)">
                <img src="~/assets/images/index/box-i3-bj3-m.png" class="bjm" alt="" />
                <img src="~/assets/images/index/box-i3-bj3-l.png" class="bjl" alt="" />

                <div class="title">问题库</div>
                <div class="text1">收录6万多条问题及 答案</div>
                <div class="text2">
                    每个问题都有回答依据， 有财税问题就来问题库 精准搜索。
                </div>

                <div class="l-title">问题库</div>
                <div class="link-list">
                    <nuxt-link v-for="(item, index) in issuelist" :key="index" :to="`/quizdata/${item.id}.html`"
                        target="_blank" class="link-item">
                        {{ item.title ? item.title : item.name }}
                    </nuxt-link>
                </div>
                <div class="l-title2">内容来源：</div>
                <div class="logo-list">
                    <img src="~/assets/images/index/box-i3-logolist5.png" alt="" />
                    <img src="~/assets/images/index/box-i3-logolist3.png" alt="" />
                </div>
                <nuxt-link to="/quizdata" target="_blank" class="i3-more">查看更多</nuxt-link>
            </div>
            <div class="box-i3-item" :class="{ large: boxI3Index == 4 }" @mouseenter="handleMouseEnter(4)"
                @mouseleave="handleMouseLeave(4)">
                <img src="~/assets/images/index/box-i3-bj4-m.png" class="bjm" alt="" />
                <img src="~/assets/images/index/box-i3-bj4-l.png" class="bjl" alt="" />

                <div class="title">热门资讯</div>
                <div class="text1">专注于财税领域的前沿信息</div>
                <div class="text2">
                    让你在瞬息万变的财税 环境中，始终站在信息
                    前沿，提供有力的信息 支撑。
                </div>

                <div class="l-title">
                    热门资讯
                    <!-- <img src="~/assets/images/quizData/hot.png" alt="" /> -->
                </div>
                <div class="link-list">
                    <nuxt-link v-for="(item, index) in imformationlist" :key="index"
                        :to="`/information/${item.id}.html`" target="_blank" class="link-item">
                        {{ item.title }}
                    </nuxt-link>
                </div>
                <div class="l-title2">内容来源：</div>
                <div class="logo-list">
                    <img src="~/assets/images/index/box-i3-logolist1.png" alt="" />
                    <img src="~/assets/images/index/box-i3-logolist5.png" alt="" />
                </div>
                <nuxt-link to="/information/rmzx/1" target="_blank" class="i3-more">查看更多</nuxt-link>
            </div>
        </div>

        <div class="media-width box-title" style="margin-top: 21px">
            <!-- <div class="box-title-t1">财税问答</div> -->
            <img src="~/assets/images/index/index_box_title_2.png" class="box-title-img" alt="财税问答" />
            <div class="box-title-text">
                小竹财税汇集众多财税专家及财税专业老师，24小时在线解答工作及学习中遇到的财税问题。
            </div>
        </div>

        <div class="box-i4">
            <div class="media-width box-i4-content">
                <div class="left">
                    <el-carousel height="430px" direction="vertical" :autoplay="true">
                        <el-carousel-item>
                            <div class="box-i4-left-1">
                                <div class="text1">
                                    <div class="text1-l">
                                        财税问题全覆盖
                                        <div>海量精选问题在线查阅</div>
                                    </div>
                                    <nuxt-link to="/cswd" target="_blank" class="text1-r">在线查阅</nuxt-link>
                                </div>
                                <div class="line"></div>
                                <div class="text2">累计解答问题</div>
                                <div class="count">
                                    <div v-for="(item, index) in quizNum" :key="index" class="count-item">
                                        {{ item }}
                                    </div>
                                    个
                                </div>
                            </div>
                        </el-carousel-item>
                        <el-carousel-item>
                            <div class="box-i4-left-2">
                                <div class="text1">小竹问答 ></div>
                                <div class="text2">
                                    财税专家在线解答遇到的财税问题
                                </div>
                                <div class="text3">
                                    <img src="~/assets/images/index/box-i4-2-img.png" alt="" />
                                    <div class="rightss">
                                        <i class="el-icon-circle-check">&nbsp;1分钟获得专业老师快速解答</i>
                                        <i class="el-icon-circle-check">&nbsp;有会计问题，就来小竹问答</i>
                                        <nuxt-link to="/cswd/ask" target="_blank" class="text1-r">快速提问</nuxt-link>
                                    </div>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="right">
                    <div class="text1">财税工具 ></div>
                    <div class="text2">财税人常用的各种实用工具</div>
                    <div class="tools-list">
                        <nuxt-link to="/tools/invoiceassistant" target="_blank" class="tools-item">发票助手</nuxt-link>
                        <nuxt-link to="/tools/taxcount" target="_blank" class="tools-item">增值税计算器</nuxt-link>
                        <nuxt-link to="/riskdetection" target="_blank" class="tools-item">税务风险检测</nuxt-link>
                        <nuxt-link to="/tools/taxsearch" target="_blank" class="tools-item">税率查询</nuxt-link>
                        <nuxt-link to="/tools/securitycount" target="_blank" class="tools-item">社保计算</nuxt-link>
                        <nuxt-link to="/tools/taxdate" target="_blank" class="tools-item">办税日历</nuxt-link>
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="media-width box-title">
            <img src="~/assets/images/index/index_box_title_5.png" class="box-title-img" alt="账户快开" />
            <div class="box-title-text">
                对公开户选小竹，又快又靠谱，还有现金补，当天兑现
            </div>
        </div>

        <div class="box-i5 media-width">
            <div class="left">
                <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index/box-i5-1.png" alt="" />
                <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index/box-i5-2.png" alt="" />
                <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index/box-i5-3.png" alt="" />
                <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index/box-i5-4.png" alt="" />
            </div>
            <div class="right">
                <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index/box-i5-r-bj.png" class="bj" alt="" />
                <nuxt-link to="/openaccount" target="_blank" class="gogogo">
                    立即开户
                    <img src="~/assets/images/index/box-i5-r-icon.png" alt="" />
                </nuxt-link>
            </div>
        </div> -->

        <div class="media-width box-title">
            <img src="~/assets/images/index/index_box_title_3.png" class="box-title-img" alt="财税/合同模板专区" />
            <div class="box-title-text">
                小竹财税提供各种财税模板、合同范本模板、财税表单、规章制度、办公表格等下载。
            </div>
            <!-- <nuxt-link
                class="box-title-more"
                to="/templates"
                target="_blank"
                rel="nofollow"
            >
                更多>
            </nuxt-link> -->
        </div>

        <div class="media-width mbzq">
            <tabs v-model="modelAreaIndex" :list="modelAreaList" :bottom="18" :line="71" class="mbzq-tabs"
                @input="getmodelArea"></tabs>
            <div class="mbzq-list">
                <model-item v-for="(item, index) in drygoodslist" :key="index" class="modelItem"
                    :item="item"></model-item>
            </div>
        </div>

        <div class=""></div>

        <!-- 年轻·小竹 -->
        <!-- <div class="media-width title-padding title-font padding-t40">
            年轻·小竹
        </div> -->
        <div class="media-width box-title">
            <img src="~/assets/images/index/index_box_title_4.png" class="box-title-img" alt="年轻·小竹" />
        </div>
        <div class="media-width nqxz">
            <div v-for="(item, index) in indexpublicitylist" :key="index" class="nqxz-item flex-space-between"
                :style="{ opacity: index == nqxzIndex ? 1 : 0 }">
                <div class="left">
                    <div class="title">{{ item.title }}</div>
                    <div class="info" v-html="item.content"></div>
                </div>
                <div class="right" @click="lookVideo(item)">
                    <el-image class="cover" fit="cover" :src="'https://xzcs-video.oss-cn-beijing.aliyuncs.com' +
                        item.pic
                        " lazy></el-image>
                    <img class="paly" src="~/assets/images/index/play.png" alt="" />
                </div>
            </div>
            <div class="indicators flex-center1">
                <div v-for="(item, index) in indexpublicitylist" :key="index"
                    :class="{ 'indicators-active': index == nqxzIndex }" class="indicators-item"
                    @click="nqxzClick(index)"></div>
            </div>
        </div>
        <!-- 年轻·小竹 end -->
        <div class="friendship-link">
            <div>
                链接：
                <a href="https://www.xzcs2022.com/" target="_blank" class="link">
                    小竹财税
                </a>
                <a href="https://www.chinatax.gov.cn/" target="_blank" class="link">
                    国家税务总局
                </a>
                <a href="https://www.ctax.org.cn/" target="_blank" class="link">
                    中国税务网
                </a>
            </div>
        </div>

        <!-- 视频播放 -->
        <div v-if="videoShow" class="zhefu">
            <video ref="zfVideo" :src="videoUrl" autoplay controls></video>
            <i class="el-icon-close" @click="keydown"></i>
        </div>
        <!-- 视频播放 end -->

        <no-ssr>
            <!-- 浮动弹窗 -->
            <!-- <dynamicPopUps></dynamicPopUps> -->
            <!-- 底部广告 -->
            <div v-show="bottomBigAdShow" class="bottom-big-ad">
                <img class="ad-img" src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzcs-ai-big-ad.png"
                    alt="小竹财税ai" />
                <i class="el-icon-circle-close" @click="bottomBigAdShow = false"></i>
                <nuxt-link class="bottom-big-ad-button" to="/chatgpt/xzcsgpt" target="_blank"></nuxt-link>
            </div>
        </no-ssr>
    </div>
</template>

<script>
import countTo from "vue-count-to";
import tabs from "@/components/index/tabs2.vue";
import videoItemIndex from "@/components/school/videoItemIndex.vue";
import modelItem from "@/components/modelArea/modelItem2";

import { getpcindex_new, getanalysedata2 } from "@/assets/api/indexApi";

import { goTopSmooth, getTime2, showMessage } from "@/assets/utils/utils.js";

import { mapMutations, mapState, mapActions } from "vuex";

import dynamicPopUps from "@/components/index/dynamicPopUps.vue";

export default {
    async asyncData({ params }) {
        let data = {
            indexRes: null,
            bannerLiset: [],
            imformationlist: [],
            issuelist: [],
            policylist: [],
            jingxuan_quiz: [],
            normlist: [],
            indexpublicitylist: [],
            drygoodslist: [],
            collegelist: [],
            quizNum: null,
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/",
                images: [""],
                title: "小竹财税官网",
                description:
                    "【安徽小竹信息技术有限公司】是一家专业的财税科技型企业，旗下小竹财税官网汇集税收法规、会计法规、财税资讯、财税学院、财税工具、财税企服等版块，打造一站式财税服务平台！",
                pubDate: "2024-05-22",
                upDate: "2024-05-22",
            },
            swiperList: [
                {
                    x: 0,
                    isAnimating: true,
                    list: [],
                    title: "税收法规库",
                    text1: "税收政策法规库更新",
                    background: "#156BFF",
                    pic: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/shuishou.png",
                    more: "/ssfgk/index/0/1",
                    url: "/ssfgk/",
                    count: 0,
                },
                {
                    x: 1,
                    isAnimating: true,
                    list: [],
                    title: "会计法规库",
                    text1: "会计政策法规指引",
                    background: "#27303F",
                    pic: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/kuaiji.png",
                    more: "/kjfgk/index/0/1",
                    url: "/kjfgk/",
                    count: 0,
                },
                {
                    x: 2,
                    isAnimating: true,
                    list: [],
                    title: "问题库",
                    text1: "问题库更新",
                    background: "#ff7900",
                    pic: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/wenti.png",
                    more: "/quizdata",
                    url: "/quizdata/",
                    count: 0,
                },
            ],
        };
        const res = await getpcindex_new({
            course_type: 1,
            drygoods_type: 1,
        });

        if (res.code == 1) {
            data.bannerLiset = res.data.banner;
            data.imformationlist = res.data.imformationlist;
            // data.swiperList[2].list = res.data.issuelist
            //     .slice(0, 5)
            //     .map((item) => {
            //         return {
            //             ...item,
            //             createtime: getTime2(item.createtime * 1000),
            //         };
            //     });
            // data.swiperList[2].count = res.data.issuelist_count;
            // data.swiperList[0].list = res.data.policylist.slice(0, 5);
            // data.swiperList[0].count = res.data.policylist_count;
            // data.swiperList[1].list = res.data.normlist.slice(0, 5);
            // data.swiperList[1].count = res.data.normlist_count;
            data.policylist = res.data.policylist;
            data.normlist = res.data.normlist;
            data.issuelist = res.data.issuelist;

            data.indexpublicitylist = res.data.indexpublicitylist;
            data.drygoodslist = res.data.drygoodslist;
            data.collegelist = res.data.collegelist;
            // for (let i = 0; i < 3; i++) {
            //     res.data.jingxuan_quiz[i].first_answer = showMessage(
            //         res.data.jingxuan_quiz[i].first_answer
            //     );
            //     data.jingxuan_quiz.push(res.data.jingxuan_quiz[i]);
            // }
            data.quizNum = [...(res.data.count_quiz + "")];

            if (data.imformationlist.length > 0)
                data.jsonld.pubDate = data.jsonld.upDate =
                    data.imformationlist[0].push_date;
            if (data.imformationlist.length == 0 && data.drygoodslist.length > 0) {
                data.jsonld.pubDate = data.jsonld.upDate =
                    data.drygoodslist[0].push_date;
            }
        }
        return data;
    },
    layout: "home",
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: "会计知识专业问答-财税会计知识问答-小竹财税官网",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税小竹财税汇集税收法规、会计法规、财税资讯、财税学院、财税工具、财税企服等版块，打造一站式财税服务平台，让天下没有难懂的财税。",
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content:
                        "税收法规,会计法规,财税资讯,财税学院,财税工具,财税企服",
                },
            ],
        };
    },
    components: {
        countTo,
        tabs,
        videoItemIndex,
        modelItem,
        dynamicPopUps,
    },
    data() {
        return {
            shoolList: [
                { name: "中级课程", show: true },
                { name: "初级课程", show: true },
                { name: "实操视频", show: false },
                { name: "考证题库", show: false },
                { name: "秒懂财税", show: true },
            ],
            shoolIndex: 0,

            modelAreaList: [
                { name: "精选推荐", show: true },
                { name: "财税表单", show: true },
                { name: "规章制度", show: true },
                { name: "合同范本", show: true },
                // { name: "财税干货分享", show: true },
                { name: "毕业季", show: true },
                { name: "办公常用", show: true },
            ],
            modelAreaIndex: 0,

            nqxzIndex: 0,

            // indexData: {},
            // bannerLiset: [],
            // imformationlist: [],
            // issuelist: [],
            // policylist: [],
            // jingxuan_quiz: [],
            // normlist: [],
            // indexpublicitylist: [],
            // drygoodslist: [],
            // collegelist: [],
            // quizNum: null,

            collegeLoading: false,
            drygoodsLoading: false,

            videoUrl: "",
            videoShow: false,

            payMoney: null,

            xzTime: null,

            strTimeStr: "",

            bottomBigAdShow: false,

            swiperIndex: 0,

            carouselIndex: 0,

            bannerIndex: 0,

            boxI3Index: 1,
        };
    },
    beforeMount() { },
    created() {
        if (this.$route.fullPath.includes("#")) {
            this.$router.replace({ path: "/404" }); // 假设你的 404 页面路由名为 'error-404'
            return;
        }
    },
    mounted() {
        this.setmenuIndex("0");
        // 启动计时器自动切换 年轻小竹
        this.xzTime = setInterval(() => {
            this.timeCheckNqxz();
            this.timeCheckbanner("next");
        }, 5000);
        this.set_logo_color(this.bannerLiset[0].logo_color);
        this.set_nav_color(this.bannerLiset[0].nav_color);
        this.set_back_color(this.bannerLiset[0].back_color);

        this.$nextTick(() => {
            goTopSmooth();
        });
        getanalysedata2({
            m_id: 11,
            type: 1,
            code: "PA1",
            describe: "首页",
        });
    },
    // 销毁前重置body样式
    beforeDestroy() {
        clearInterval(this.xzTime);
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    watch: {},
    methods: {
        ...mapMutations("common", [
            "setloginShow",
            "setmenuIndex",
            "set_logo_color",
            "set_nav_color",
            "set_back_color",
            // "set_indexRes",
        ]),
        ...mapActions("common", ["getUserInfo"]),

        // 页面数据初始化
        getpcindex_new() {
            if (this.indexRes && Object.values(this.indexRes).length > 0) {
                this.indexData = this.indexRes;
                this.bannerLiset = this.indexRes.banner;
                this.imformationlist = this.indexRes.imformationlist;
                this.issuelist = this.indexRes.issuelist.map((item) => {
                    return {
                        ...item,
                        createtime: getTime2(item.createtime * 1000),
                    };
                });
                this.policylist = this.indexRes.policylist;
                this.normlist = this.indexRes.normlist;
                this.indexpublicitylist = this.indexRes.indexpublicitylist;
                this.drygoodslist = this.indexRes.drygoodslist;
                this.collegelist = this.indexRes.collegelist;
                // for (let i = 0; i < 3; i++) {
                //     this.indexRes.jingxuan_quiz[i].first_answer = showMessage(
                //         this.indexRes.jingxuan_quiz[i].first_answer
                //     );
                //     this.jingxuan_quiz.push(this.indexRes.jingxuan_quiz[i]);
                // }
                this.quizNum = this.indexRes.count_quiz;
            }
        },
        async getpcindex_new2() {
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, 0.6)",
            });
            const res = await getpcindex_new({
                course_type: this.shoolIndex + 1,
                drygoods_type: this.modelAreaIndex + 1,
            });
            if (res.code == 1) {
                this.indexRes = res.data;
                this.getpcindex_new();
                if (loading) loading.close();
            }
        },

        async gettuijian(index) {
            this.collegeLoading = true;
            const res = await getpcindex_new({
                course_type: this.shoolIndex + 1,
            });
            this.collegeLoading = false;
            if (res.code == 1) {
                this.collegelist = res.data.collegelist;
            }
        },

        async getmodelArea(index) {
            this.drygoodsLoading = true;
            const res = await getpcindex_new({
                drygoods_type: this.modelAreaIndex + 1,
            });
            this.drygoodsLoading = false;
            if (res.code == 1) {
                this.drygoodslist = res.data.drygoodslist.slice(0, 4);
            }
        },

        handleMouseEnter(i) {
            this.boxI3Index = i;
        },

        handleMouseLeave(i) { },

        timeCheckNqxz() {
            if (this.nqxzIndex == this.indexpublicitylist.length - 1) {
                this.nqxzIndex = 0;
            } else {
                this.nqxzIndex = this.nqxzIndex + 1;
            }
        },

        // 点击年轻小竹
        nqxzClick(index) {
            clearInterval(this.xzTime);
            this.nqxzIndex = index;
            this.xzTime = setInterval(() => {
                this.timeCheckNqxz();
            }, 5000);
        },

        nextORprevious(to) {
            if (this.xzTime) {
                clearInterval(this.xzTime);
                this.xzTime = null;
            }
            this.timeCheckbanner(to);
            this.xzTime = setInterval(() => {
                this.timeCheckNqxz();
                this.timeCheckbanner("next");
            }, 5000);
        },

        timeCheckbanner(to) {
            if (to == "next") {
                if (this.bannerIndex == this.bannerLiset.length - 1) {
                    this.bannerIndex = 0;
                } else {
                    this.bannerIndex = this.bannerIndex + 1;
                }
            }
            if (to == "previous") {
                if (this.bannerIndex == 0) {
                    this.bannerIndex = this.bannerLiset.length - 1;
                } else {
                    this.bannerIndex = this.bannerIndex - 1;
                }
            }
            // console.log(this.bannerLiset[this.bannerIndex]);
            this.set_logo_color(this.bannerLiset[this.bannerIndex].logo_color);
            this.set_nav_color(this.bannerLiset[this.bannerIndex].nav_color);
            this.set_back_color(this.bannerLiset[this.bannerIndex].back_color);
        },

        go(path, params) {
            this.$router.push({ path: path, query: params });
        },

        goBlank(path, params = {}) {
            let routeData = this.$router.resolve({
                path: path,
                query: params,
            });
            window.open(routeData.href, "_blank");
        },

        bannerClick() {
            let item = this.bannerLiset[this.bannerIndex];
            console.log(item);
            if (!item.url) return;
            if (
                item.url.startsWith("http://") ||
                item.url.startsWith("https://")
            )
                window.open(item.url, "_blank");
            else this.goBlank(item.url);
        },

        goCsjh() {
            this.$router.push({
                path: "/cswd",
            });
        },

        goLogin() {
            this.$router.push({
                path: "/login",
            });
        },

        keydown() {
            this.videoShow = false;
            this.$refs.zfVideo.pause();
        },

        lookVideo(item) {
            this.videoUrl = this.indexpublicitylist[this.nqxzIndex].url;
            this.videoShow = true;
        },

        goDetails(item) {
            if (!this.userInfo) {
                this.setloginShow(true);
                return;
            }
        },
        goUrlBlank(data) {
            let routeData = this.$router.resolve(data);
            window.open(routeData.href, "_blank");
        },

        goGPT() {
            // this.$router.push({
            //     path: "/chatgpt/xzcsgpt",
            // });
            window.open("/chatgpt/xzcsgpt", "_blank");
        },

        goAsk(path = "/cswd/ask") {
            if (this.userInfo)
                this.$router.push({
                    path: path,
                });
            else
                this.$confirm("需要登录后提问", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        window.localStorage.removeItem("token");
                        window.localStorage.removeItem("userInfo");
                        window.location.href =
                            "/login?url=" +
                            window.location.pathname +
                            window.location.search;
                    })
                    .catch(() => { });
        },

        carouselchange(index) {
            this.carouselIndex = index;
        },
    },
};
</script>

<style lang="scss">
@import "~/assets/static/payDialog.scss";

.xzcs-pc-new-index3 {

    /* 针对大屏幕的样式 */
    @media (min-width: 2000px) {
        .media-width {
            width: 1450px;
        }

        .top-banner {
            height: 540px;
        }

        .box-title {
            margin-top: 34px !important;

            .box-title-t1 {
                font-size: 24px !important;
            }

            .box-title-more {
                font-size: 16px !important;

                &:hover {
                    opacity: 0.8;
                }
            }
        }
    }

    /* 针对小屏幕的样式 */
    @media (max-width: 1999px) {
        .media-width {
            width: 1200px;
        }

        .top-banner {
            height: 520px;
        }

        .nqxz {
            width: 1200px !important;
            height: 307px !important;

            .nqxz-item {
                width: 1166px !important;
            }

            .left {
                width: 500px !important;
            }

            .right {
                .cover {
                    width: 553px !important;
                    height: 278px !important;
                }
            }
        }
    }

    /* 针对小屏幕的样式 */
    @media (max-width: 1300px) {
        .top-banner {
            height: 360px;
        }
    }

    .media-width {
        margin: 0 auto;
    }

    .top-banner {
        width: 100%;
        position: relative;
        overflow: hidden;

        &:hover {
            .arrow-left {
                left: 16px !important;
            }

            .arrow-right {
                right: 16px !important;
            }
        }

        .banner-img-arrow {
            position: absolute;
            height: 36px;
            width: 36px;
            line-height: 36px;
            text-align: center;
            top: 50%;
            border-radius: 50%;
            background-color: rgba(31, 45, 61, 0.11);
            color: #fff;
            transition: all 0.5s;
            cursor: pointer;
        }

        .arrow-left {
            left: -36px;
        }

        .arrow-right {
            right: -36px;
        }

        .banner-img {
            width: 100%;
            height: 100%;
            display: block;
            transition: opacity 1.5s;
            cursor: pointer;
            position: absolute;
            left: 0;
            top: 0;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .box-i2 {
        width: 100%;
        background: #ffffff;
    }

    .box-i2-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 103px;

        .box-i2-item {
            font-size: 14px;
            color: #666666;
            display: block;

            img {
                height: 17px;
                margin-bottom: 10px;
                width: auto;
                display: block;
            }
        }
    }

    .box-i3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 36px;
        padding-bottom: 15px;

        .large {
            width: 482px !important;

            .title,
            .text1,
            .text2,
            .bjm {
                display: none !important;
            }

            .bjl,
            .logo-list,
            .l-title2,
            .link-list,
            .l-title,
            .i3-more {
                display: block !important;
            }
        }
    }

    .box-i3-item {
        width: 220px;
        height: 508px;
        transition: width 0.4s;
        position: relative;
        margin-right: 20px;
        overflow: hidden;

        &:last-child {
            margin-right: 0;
        }

        .bjm {
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: block;
        }

        .bjl {
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
        }

        .logo-list,
        .l-title2,
        .link-list,
        .l-title,
        .title,
        .text1,
        .text2 {
            position: relative;
            z-index: 10;
        }

        .title {
            font-size: 22px;
            font-weight: 700;
            color: #ffffff;
            padding-left: 20px;
            padding-top: 25px;
        }

        .text1 {
            padding-bottom: 20px;
            padding-top: 22px;
            font-size: 16px;
            font-weight: 500;
            color: #ffffff;
            padding-left: 20px;
            width: 166px;
        }

        .text2 {
            color: #ffffff;
            font-size: 14px;
            font-weight: 400;
            padding-left: 20px;
            width: 166px;
        }

        .l-title {
            color: #333333;
            padding-left: 40px;
            padding-top: 35px;
            font-size: 24px;
            font-weight: 700;
            display: none;
        }

        .link-list {
            padding-top: 30px;
            display: none;
        }

        .link-item {
            color: #666666;
            font-size: 16px;
            font-weight: 400;
            padding-left: 40px;
            padding-bottom: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 400px;

            &:hover {
                text-decoration: underline;
            }
        }

        .l-title2 {
            color: #333333;
            padding-left: 40px;
            padding-top: 26px;
            padding-bottom: 32px;
            font-size: 24px;
            font-weight: 700;
            display: none;
        }

        .logo-list {
            padding-left: 40px;
            display: flex;
            display: none;

            img {
                margin-right: 6px;
                height: 32px;
                width: auto;
            }
        }

        .i3-more {
            width: 185px;
            height: 46px;
            line-height: 46px;
            text-align: center;
            background: #23b39f;
            border-radius: 5px;
            font-weight: 700;
            font-size: 22px;
            color: #ffffff;
            position: absolute;
            z-index: 10;
            right: 47px;
            bottom: 35px;
            cursor: pointer;
            display: none;

            &:hover {
                opacity: 0.9;
            }

            &:active {
                opacity: 0.8;
            }
        }
    }

    .box-i4 {
        background-image: url(~/assets/images/index/box-i4-bj.png);
        width: 100%;
        height: 430px;
        background-size: 100% 100%;
        margin-top: 36px;
    }

    .box-i4-content {
        display: flex;
        justify-content: space-between;

        .left {
            width: 50%;
            height: 430px;
        }

        .right {
            width: 50%;
            height: 430px;
            padding-top: 80px;
            padding-left: 70px;

            .text1 {
                font-weight: 400;
                font-size: 26px;
                color: #ffffff;
            }

            .text2 {
                padding-top: 32px;
                font-weight: 700;
                font-size: 28px;
                color: #ffffff;
            }

            .tools-list {
                padding-top: 43px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                .tools-item {
                    margin-bottom: 24px;
                    margin-right: 21px;
                    width: 151px;
                    height: 49px;
                    line-height: 48px;
                    text-align: center;
                    border-radius: 5px;
                    border: 1px solid #ffffff;
                    font-weight: 500;
                    font-size: 18px;
                    color: #ffffff;

                    &:hover {
                        opacity: 0.8;
                    }
                }
            }
        }

        .text1-r {
            width: 182px;
            height: 52px;
            line-height: 48px;
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            border: 2px solid #ffffff;
            font-weight: 500;
            font-size: 24px;
            color: #ffffff;
            cursor: pointer;
            user-select: none;

            &:hover {
                opacity: 0.9;
            }

            &:active {
                opacity: 0.8;
            }
        }
    }

    .box-i4-left-1 {
        .text1 {
            padding-top: 80px;
            width: 464px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .text1-l {
                font-size: 24px;
                color: #ffffff;
                font-weight: 500;

                div {
                    padding-top: 27px;
                }
            }
        }

        .line {
            background: #d8d8d8;
            height: 1px;
            width: 464px;
            margin-top: 34px;
            margin-bottom: 35px;
        }

        .text2 {
            color: #ffffff;
            font-weight: 700;
            font-size: 24px;
        }

        .count {
            margin-top: 20px;
            font-weight: 700;
            font-size: 36px;
            color: #ffffff;
            display: flex;
            align-items: flex-end;
        }

        .count-item {
            margin-right: 11px;
            width: 84px;
            height: 66px;
            line-height: 66px;
            background: #43a0ff;
            border-radius: 3px;
            text-align: center;
            font-weight: 700;
            font-size: 55px;
            color: #ffffff;
        }
    }

    .box-i4-left-2 {
        padding-top: 65px;

        .text1 {
            color: #ffffff;
            font-weight: 400;
            font-size: 26px;
        }

        .text2 {
            color: #ffffff;
            font-weight: 700;
            font-size: 28px;
            margin: 30px 0;
        }

        .text3 {
            display: flex;

            img {
                width: 225px;
                height: 157px;
                display: block;
                margin-right: 12px;
            }

            .rightss {
                i {
                    font-weight: 500;
                    font-size: 18px;
                    color: #ffffff;
                    line-height: 28px;
                    padding-bottom: 22px;
                }

                .text1-r {
                    margin-left: 35px;
                }
            }
        }
    }

    .box-i5 {
        display: flex;
        justify-content: space-between;
        margin-top: 36px;

        .left {
            padding-right: 20px;
            height: 348px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;

            img {
                width: 296px;
                height: 168px;
                display: block;
            }
        }

        .right {
            width: 580px;
            min-width: 580px;
            height: 348px;
            position: relative;

            .bj {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            .gogogo {
                width: 211px;
                height: 52px;
                background: #287eff;
                box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
                border-radius: 50px;
                font-weight: 500;
                font-size: 24px;
                color: #ffffff;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                z-index: 10;
                bottom: 82px;
                left: 37px;

                img {
                    width: 24px;
                    height: 24px;
                    padding-left: 18px;
                    display: flex;
                }

                cursor: pointer;

                &:hover {
                    opacity: 0.8;
                }

                &:active {
                    opacity: 0.9;
                }
            }
        }
    }

    .box-title {
        text-align: center;
        // display: flex;
        // align-items: flex-end;
        margin-top: 36px;

        div,
        a {
            white-space: nowrap;
        }

        .box-title-img {
            width: auto;
            height: 21px;
            margin-bottom: 12px;
        }

        .box-title-t1 {
            font-weight: 700;
            font-size: 26px;
            color: #333333;
        }

        .box-title-text {
            font-weight: 400;
            font-size: 16px;
            color: #666666;
            padding-left: 30px;
            width: 100%;
        }

        .box-title-more {
            font-weight: 400;
            font-size: 18px;
            color: #0678fa;

            &:hover {
                opacity: 0.8;
            }
        }
    }

    .mbzq {
        .mbzq-tabs {
            position: relative;
            left: -23px;
        }

        .mbzq-list {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    a {
        display: block;
    }

    .flex-center1 {
        display: flex;
        align-items: center;
    }

    .flex-center2 {
        display: flex;
        justify-content: center;
    }

    .flex-space-between {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .title-padding {
        padding-top: 45px;
        padding-bottom: 25px;
    }

    .title-padding2 {
        padding-top: 5px;
        padding-bottom: 3px;

        .more {
            bottom: 5px !important;
        }
    }

    .title-font {
        font-size: 24px;
        color: #333333;
        white-space: nowrap;
        position: relative;
        display: flex;
        align-items: center;

        span {
            color: #909399;
            font-size: 12px;
            padding-left: 7px;
        }

        .more {
            display: block;
            box-sizing: border-box;
            font-size: 14px;
            color: #999;
            cursor: pointer;
            position: absolute;
            right: 0;
            bottom: 30px;
        }
    }

    .user-information {
        .information {
            margin-top: 10px;
            width: 210px;
            height: 90px;
            background: #ffffff;
            position: relative;
            border-radius: 10px;

            .i-title {
                position: absolute;
                top: 0;
                left: 0;
                width: 68px;
                height: 26px;
                line-height: 26px;
                font-size: 12px;
                color: #ffffff;
                background: #1c87f3;
                border-radius: 10px 0px 10px 0px;
                text-align: center;
            }

            .text {
                font-size: 12px;
                color: #666666;
                padding: 37px 11px 0 18px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                /* 这里设置你想要显示的行数 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;

                &:hover {
                    color: #1c87f3;
                }
            }
        }
    }

    .nqxz {
        background: #ffffff;
        border-radius: 6px;
        position: relative;
        height: 370px;
        width: 1450px;
        margin-bottom: 50px;
        margin-top: 17px;

        .nqxz-item {
            position: absolute;
            left: 15px;
            top: 17px;
            width: 1416px;
            align-items: center;
            transition: opacity 1.5s;
        }

        .left {
            width: 650px;
            padding-left: 21px;
            padding-bottom: 75px;

            .title {
                font-size: 38px;
                font-weight: 500;
                color: #333333;
            }

            .info {
                margin-top: 20px;
                height: 52px;
                font-size: 18px;
                line-height: 26px;
                color: #666666;
            }
        }

        .right {
            position: relative;
            cursor: pointer;

            .cover {
                width: 667px;
                height: 335px;
                border-radius: 10px;
            }

            .paly {
                position: absolute;
                top: calc(50% - 40px);
                left: calc(50% - 40px);
                width: 80px;
                height: 80px;
            }
        }

        .indicators {
            position: absolute;
            left: 47px;
            bottom: 50px;

            .indicators-item {
                cursor: pointer;
                width: 48px;
                height: 4px;
                background: #f0f0f0;
                border-radius: 39px;
                margin-right: 10px;
                transition: background-color 1.5s;

                &:hover {
                    background: #4ea6ff;
                }
            }

            .indicators-active {
                background: #4ea6ff;
            }
        }
    }

    .zhefu {
        width: 100vw;
        height: calc(100vh - 80px);
        position: fixed;
        top: 80px;
        left: 0;
        z-index: 10000000;
        background-color: #333333;

        video {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        i {
            position: fixed;
            right: 20px;
            top: 85px;
            color: #ffffff;
            font-size: 32px;
            cursor: pointer;
        }
    }

    .friendship-link {
        border-bottom: 1px solid #32394a;
        background-color: #161e30;

        >div {
            width: 1200px;
            margin: 0 auto;
            line-height: 46px;
            height: 46px;
            font-weight: 400;
            font-size: 13px;
            color: #dedede;
            display: flex;
        }

        .link {
            color: #dedede;
            margin-right: 10px;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .lineHeight30 {
        line-height: 30px;
    }

    .countTo {
        position: relative;
        left: 12px;
    }

    .padding-t16 {
        padding-top: 16px;
    }

    .padding-t33 {
        padding-top: 33px;
    }

    .padding-t40 {
        padding-top: 40px;
    }

    .bottom-big-ad {
        position: fixed;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 153px;
        z-index: 998;
        display: flex;
        justify-content: center;
        background: linear-gradient(to right, #e2eefb, #cfdff4);

        .ad-img {
            display: block;
            width: auto;
            height: 246px;
            position: relative;
            top: -98px;
            object-fit: cover;
        }

        .el-icon-circle-close {
            font-size: 32px;
            color: #999999;
            position: fixed;
            color: #999999;
            font-size: 32px;
            z-index: 998;
            bottom: 200px;
            right: calc(50vw - 600px - 45px);
            cursor: pointer;
            user-select: none;
        }

        .bottom-big-ad-button {
            position: fixed;
            height: 48px;
            bottom: 18px;
            left: calc(50vw - 600px + 25px);
            z-index: 998;
            width: 106px;
            cursor: pointer;
        }
    }
}
</style>